<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>
			登录- ZOL商城
		</title>
		<meta name="keywords" content="登录- ZOL商城"/>
		<meta name="description" content="登录- ZOL商城"/>
		<link href="./Public/other/css/login.css" rel="stylesheet" type="text/css" />
		<script src="./Public/other/js/jquery-1.8.1.js"  type="text/javascript"></script>
		<script src="./Public/other/js/jquery-md5.js"  type="text/javascript"></script>
	</head>
	<body class="login-index">
		<div class="wrapper">
			<div class="header clearfix">
				<!-- register-bar add by hanjw 2014-6-24-->
				<div class="register-bar">
					<a href="{{U('Register/index')}}">
						立即注册
					</a>还没有ZOL商城账号？
				</div>
				<!-- //register-bar add by hanjw 2014-6-24-->
				<div class="logo">
					<!-- modify by hanjw 2014-6-24 -->
					<a title="ZOL商城" href="{{U('Index/index')}}">
						<img width="182" height="60" title="ZOL商城" alt="ZOL商城" src="./Public/other/image/shop_182x60.png">
						<p>
							中关村在线旗下网上商城
						</p>
					</a>
					<!-- modify by hanjw 2014-6-24 -->
				</div>
			</div>
			<form id="J_loginForm" action="" method="post">
				<div class="login-wrap clearfix">
					<div class="ad-div">
						<div>
							<a href="#" target="_blank">
								<img width="520" height="350" src="./Public/other/image/ad.jpg" alt="">
							</a>
						</div>
					</div>
					<div class="login-layer">
						<div class="login-head">
							<a href="javascript:void(0)" class="otherLogin-bar mobileLogin-bar" rel="J_phone">
								手机动态码登录
							</a>
							<h3>
								登录ZOL商城
							</h3>
						</div>
						<div class="login-content" id="J_login_common">
							<div class="login-wrong-tips" id="J_login-wrong-tips" style="display:none;">
								-
							</div>
							<div class="form-item username">
								<input type="text"  autocomplete="off" placeholder="手机号/邮箱/用户名" class="text" id="J_loginUser" name="zolShopUserName" maxlength="100" value="text111">
								<i class="remove" style="display:none;">
								</i>
								<ul style="display:none;" class="account-list" id="J_accountList">
								</ul>
							</div>
							<div class="form-item">
								<input type="password" autocomplete="off" placeholder="密码" class="text" name="J_loginPsw" maxlength="20" value="admin1">
								<i class="remove" style="display:none;">
								</i> <span class="case-tips" id="J_loginCapsLock">大小写锁定已打开
									<i class="ico">
									</i></span>
							</div>
							<div class="form-other">
								<label class="autologon"><!--<input type="checkbox" name="" value="">记住登录状态--></label>
								<a target="_blank" href=" ">
									忘记密码？
								</a>
							</div>
							<input type="hidden" value="1" name="J_login_type" id="J_login_type">
							<input type="submit" value="登 录" class="login-layer-btn" id="J_loginBtn">
							<span style="display:none;" class="submit-loading" id="J_loginingBtn">正在登录...</span>
						</div>
						<div class="login-content mobileLogin-content" id="J_login_mobile" style="display:none;">
							<div class="login-wrong-tips" id="J_login-mobile-wrong-tips" style="display:none;">
								-
							</div>
							<!-- add by hanjw 2014-6-24 -->
							<div class="form-item ">
								<input type="text" autocomplete="off" placeholder="手机号" class="text" id="J_login_mobile_number" name="J_login_mobile_number">
							</div>
							<div class="form-item captcha-item">
								<input type="text" value="" autocomplete="off" placeholder="图片验证码" class="text" id="J_login_mobile_picCode" name="picCode" maxlength="5">
								<input name="J_login_mobile_token" id="J_login_mobile_token" type="hidden" value="d36aec411103478dd2364acda0c05503">
								<img width="100" height="40" src=" " alt="图片验证码" id="J_login_mobile_img">
							</div>
							<div class="form-item phone-number">
								<input type="text" autocomplete="off" placeholder="短信验证码" class="text" id="J_login_mobile_code" name="J_login_mobile_code">
								<input name="J_login_send_button" type="button" value="发送验证码" class="btn" id="J_login_send_button">
								<span class="captcha-loading" id="J_login_send_wait" style="display: none">100秒后重新获取</span>
							</div>
							<!-- //add by hanjw 2014-6-24 -->
							<input type="button" value="登 录" class="login-layer-btn" id="J_loginBtn_mobile">
							<span style="display:none;" class="submit-loading" id="J_loginingBtn_mobie">正在登录...</span>
						</div>
						<div class="login-foot clearfix">
							<span>合作账号登录：</span>
							<a target="_blank" class="sina" href="">
								用微博账号登录
							</a>
							<a target="_blank" class="qq" href="">
								用QQ账号登录
							</a>
							<a target="_blank" class="alipay" href="">
								用支付宝账号登录
							</a>
							<a target="_blank" class="baidu" href="">
								用百度账号
							</a>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div class="footer">
			<div class="wrapper clearfix">
				<div class="about">
					<a href="" target="_blank">
						关于ZOL商城
					</a>|
					<a href="" target="_blank">
						联系我们
					</a>|
					<a href="" target="_blank">
						帮助中心
					</a>
				</div>
				<div class="copyright">
					&copy;
					<script type="text/javascript">var yearStr;
now = new Date();
yearStr = now.getFullYear();
document.write(yearStr);</script>. 中关村在线 版权所有
				</div>
			</div>
		</div>
		<script language="JavaScript" src="./Public/other/js/pv.js" type="text/javascript"></script>
		<script>$(function() {
	var callBackUrl = "";
	var baseUrl = "";
	var zolBaseUrl = "";
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (navigator.userAgent.indexOf("MSIE") && ("6.0" == $.browser.version)) {
		zolBaseUrl = "";
	}

	function captchaPhone() {
		var curtime = new Date().getTime();
		var numCnt = 5;
		var url = zolBaseUrl + "/captcha.php?token=" + curtime + '&numCnt=' + numCnt + '&width=98&height=38';
		$("#J_login_mobile_img").attr("src", url);
		$("#J_login_mobile_token").val(curtime);
		return false;
	}
	$("#J_login_mobile_img").click(function() {
		captchaPhone();
	});
	// 登录切换
	$(".otherLogin-bar").bind('click', function() {
		var rel = $(this).attr("rel");
		if ('J_phone' == rel) {
			$(this).removeClass("mobileLogin-bar").attr("rel", "J_common").html("普通方式登录");
			$("#J_login_common").hide();
			$("#J_login_mobile").show();
			$("#J_login_type").val(2);
		} else {
			$(this).addClass("mobileLogin-bar").attr("rel", "J_phone").html("手机动态码登录");
			$("#J_login_common").show();
			$("#J_login_mobile").hide();
			$("#J_login_type").val(1);
		}
	});
	// 选中加红色边框
	$(":input[name != J_login_send_button]").focus(function() {
			$(this).parent().addClass("focus");
		}).blur(function() {
			$(this).parent().removeClass("focus");
		})
		// 手机号验证
	var checkMobile = function(mobile) {
			var flag = false;
			if (mobile) {
				var regPartton = new RegExp(/1[3-8]+\d{9}/);
				if (regPartton.test(mobile)) {
					flag = true;
				}
			}
			return flag;
		}
		// 发送验证码倒计时时间
	var timeout = null;
	var countDownNumber = 100;
	var userMobileCountDown = function() {
			$("#J_login_send_button").hide();
			countDownNumber--;
			$('#J_login_send_wait').html(countDownNumber + '秒后重新获取').show();
			if (!countDownNumber) {
				countDownNumber = 100;
				clearTimeout(timeout);
				$("#J_login_send_wait").hide();
				$("#J_login_send_button").show();
			} else {
				timeout = setTimeout(userMobileCountDown, 1000);
			}
		}
		// 发送验证码
	$("#J_login_send_button").bind('click', function() {
		var mobile = $("#J_login_mobile_number").val();
		if ('' == mobile) {
			$("#J_login-mobile-wrong-tips").html("请填写手机号").show();
			return false;
		}
		if (!checkMobile(mobile)) {
			$("#J_login-mobile-wrong-tips").html("请填写正确的手机号").show();
			return false;
		}
		var picCode = $("#J_login_mobile_picCode").val();
		if ('' == picCode) {
			$("#J_login-mobile-wrong-tips").html("请填写图片验证码").show();
			return false;
		}
		var picToken = $("#J_login_mobile_token").val();
		// 请求验证码
		var url = baseUrl + "/index.php?a=SendPhoneCode&callback=?&t=" + Math.random();
		$.getJSON(
			url, {
				mobile: mobile,
				picCode: picCode,
				picToken: picToken
			},
			function(data) {
				if (data.flag) {
					$("#J_login-mobile-wrong-tips").hide();
					setTimeout(userMobileCountDown, 1000);
				} else {
					$("#J_login-mobile-wrong-tips").html(data.msg).show();
				}
			}
		);
		return false;
	});
	// 普通登录按钮切换
	var userLoginBtn = function(loginType) {
			if ('none' == loginType) {
				$("#J_loginingBtn").show();
				$("#J_loginBtn").hide();
			} else {
				$("#J_loginingBtn").hide();
				$("#J_loginBtn").show();
			}
		}
		// 手机号登录按钮切换
	var userMobileLoginBtn = function(loginType) {
			if ('none' == loginType) {
				$("#J_loginingBtn_mobie").show();
				$("#J_loginBtn_mobile").hide();
			} else {
				$("#J_loginingBtn_mobie").hide();
				$("#J_loginBtn_mobile").show();
			}
		}
		// 检测登录名是邮箱提示
	$("#J_loginUser").bind("keyup", function() {
		var email = $(this).val();
		if (email) {
			var indexNumber = email.indexOf("@");
			if (indexNumber > 0) {
				var emailArr = new Array("qq.com", "163.com", "gmail.com", "126.com", "sina.com", "hotmail.com");
				var emailList = '';
				var number = emailArr.length;
				var emailtTitle = email.substr(0, indexNumber);
				var emailBody = email.substr(indexNumber + 1);
				for (i = 0; i < number; i++) {
					if (-1 !== emailArr[i].indexOf(emailBody)) {
						if (email != (emailtTitle + '@' + emailArr[i])) {
							emailList += '<li>' + emailtTitle + '@' + emailArr[i] + '</li>';
						}
					}
				}
				$("#J_accountList").html(emailList).show();
				$("#J_accountList > li").bind("click", function() {
					$("#J_loginUser").val($(this).html());
					$("#J_accountList").hide();
				});
			} else {
				$("#J_accountList").hide();
			}
		}
	});
	// 检测键盘大小写问题
	$("#J_loginPsw").bind("keypress", function(e) {
		var e = e || window.event;
		var o = e.target || e.srcElement;
		var keyCode = e.keyCode || e.which; // 按键的keyCode
		var isShift = e.shiftKey || (keyCode == 16) || false; // shift键是否按住
		if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
			$("#J_loginCapsLock").show();
		} else {
			$("#J_loginCapsLock").hide();
		}
	});

	// 回车提交登录
	$('#J_loginForm').keypress(function(e) {
		if (e.keyCode == 13) {
			var loginType = $("#J_login_type").val();
			loginType = parseInt(loginType);
			if (1 == loginType) {
				userCommonLogin();
			}
			if (2 == loginType) {
				userPhoneNumberLogin();
			}
		}
	});
});</script>
	</body>
</html>